<!-- directive:title Tooltip -->
<!-- directive:breadcrumb Tooltip -->
<div class='panel-body'>
    <div class="panel panel-default">
        <div class="panel-heading">Tooltip</div>
        <div class="panel-body">
            <div class="row">
                <div class="col-sm-5">
                    <div class="form-group">
                        <label>Tooltip placement</label>
                        <select class="form-control" ng-model="placement.selected" ng-options="o as o for o in placement.options"></select>
                    </div>
                    <button tooltip-placement="{{placement.selected}}" uib-tooltip="On the {{placement.selected}}" type="button" class="btn btn-default">Tooltip {{placement.selected}}</button>
                    <hr />
                    <div class="form-group">
                        <label>Dynamic Tooltip Text</label>
                        <input type="text" ng-model="dynamicTooltipText" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>Dynamic Tooltip Popup Text</label>
                        <input type="text" ng-model="dynamicTooltip" class="form-control">
                    </div>
                    <p>
                        Pellentesque <a href="#" uib-tooltip="{{dynamicTooltip}}">{{dynamicTooltipText}}</a>,
                        sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in
                        aliquam. Tincidunt lobortis feugiat vivamus at
                        <a href="#" tooltip-animation="false" uib-tooltip="I don't fade. :-(">fading</a>
                        eget arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
                        <a href="#" tooltip-popup-delay='1000' uib-tooltip='appears with delay'>show delay</a>
                        nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
                        <a href="#" tooltip-popup-close-delay='1000' uib-tooltip='hides with delay'>hide delay</a>
                        pharetra convallis posuere morbi leo urna,
                        <a href="#" uib-tooltip-template="'myTooltipTemplate.html'">Custom template</a>
                        at elementum eu, facilisis sed odio morbi quis commodo odio.
                    </p>
                    <p>
                        I can even contain HTML as a
                        <a href="#" uib-tooltip-html="htmlTooltip">scope variable</a> or
                        <a href="#" uib-tooltip-html="'static. {{dynamicTooltipText}}. <b>bold.</b>'">inline string</a>
                    </p>
                    <p>
                        <style>
                            /* Specify styling for tooltip contents */ .tooltip.customClass .tooltip-inner { color: #880000; background-color: #ffff66; box-shadow: 0 6px 12px rgba(0,0,0,.175); }
                            /* Hide arrow */ .tooltip.customClass .tooltip-arrow { display: none; }
                        </style>
                        I can have a custom class. <a href="#" uib-tooltip="I can have a custom class applied to me!" tooltip-class="customClass">Check me out!</a>
                    </p>
                    <div class="form-group">
                        <label>Or use custom triggers, like focus: </label>
                        <input type="text" value="Click me!" uib-tooltip="See? Now click away..." tooltip-trigger="'focus'" tooltip-placement="right" class="form-control" />
                    </div>
                    <div class="form-group" ng-class="{'has-error' : !inputModel}">
                        <label>Disable tooltips conditionally:</label>
                        <input type="text" ng-model="inputModel" class="form-control"
                            placeholder="Hover over this for a tooltip until this is filled"
                            uib-tooltip="Enter something in this input field to disable this tooltip"
                            tooltip-placement="top"
                            tooltip-trigger="'mouseenter'"
                            tooltip-enable="!inputModel" />
                    </div>
                    <div class="form-group">
                        <label>
                            Open tooltips <span uib-tooltip="Hello!" tooltip-is-open="tooltipIsOpen" tooltip-placement="bottom">conditionally.</span>
                        </label>
                        <button ng-click="tooltipIsOpen = !tooltipIsOpen">Toggle tooltip</button>
                    </div>
                    <script type="text/ng-template" id="myTooltipTemplate.html">
                        <span>Special Tooltip with <strong>markup</strong> and {{ dynamicTooltipText }}</span>
                    </script>
                </div>
                <div class="col-sm-7">
                    <script type="text/xianjs" ui-bs>
                        <button tooltip-placement="top" uib-tooltip="On the top" type="button" class="btn btn-default">Tooltip top</button>
                    </script>
                    <table class="table"> <tbody> <tr> <td><span>属性名</span></td> <td><span>默认值</span></td> <td><span>备注</span></td> </tr> <tr> <td><span>tooltip-animation</span></td> <td><span>true</span></td> <td><span>是否在显示和隐藏时使用动画</span></td> </tr> <tr> <td><span>uib-tooltip-append-to-body</span></td> <td><span>false</span></td> <td><span>是否将提示框放在body的末尾</span></td> </tr> <tr> <td><span>tooltip-class</span></td> <td><span>&nbsp;</span></td> <td><span>加在uib-tooltip上的自定义的类名</span></td> </tr> <tr> <td><span>tooltip-enable</span></td> <td><span>true</span></td> <td><span>是否启用</span></td> </tr> <tr> <td><span>tooltip-is-open</span></td> <td><span>false</span></td> <td><span>是否显示提示框</span></td> </tr> <tr> <td><span>tooltip-placement</span></td> <td><span>top</span></td> <td><span>提示框的位置。可设置的值包括：top,top-left,top-right,bottom,bottom-left,bottom-right,left,left-top,left-bottom,right,right-top,right-bottom</span></td> </tr> <tr> <td><span>tooltip-popup-close-delay</span></td> <td><span>0</span></td> <td><span>关闭提示框前的延迟时间</span></td> </tr> <tr> <td><span>tooltip-popup-delay</span></td> <td><span>0</span></td> <td><span>显示提示框前的延迟时间</span></td> </tr> <tr> <td><span>tooltip-trigger</span></td> <td><span>mouseenter</span></td> <td><span>显示提示框的触发事件 mouseenter mouseleave click click outsideClick outsideClick focus blur none</span></td> </tr> </tbody> </table>
                </div>
            </div>
            <pre better-pre>
                有工具提示的三个版本：uib-tooltip，uib-tooltip-template和 uib-tooltip-html：

                uib-tooltip - 仅使用文本，并将转义任何提供的HTML。
                uib-tooltip-html $ - 采用一个计算结果为HTML字符串的表达式。请注意，此HTML未编译。如果需要编译，请改用uib-tooltip-template属性选项。用户有责任确保将内容安全放入DOM中！
                uib-tooltip-template $ - 采用指定用于工具提示的模板位置的文本。请注意，这需要包装在标签中。
                uib-tooltip- *设置
                所有这些设置都可用于三种工具提示。

                tooltip-animation $  Ç  （默认：true，配置：animation） -如果它淡入和淡出？

                tooltip-append-to-body $  Ç  （默认值：false，配置：appendToBody） -如果该工具提示被附加到“$体”，而不是父元素？

                tooltip-class - 要应用于工具提示的自定义类。

                tooltip-enable $  （默认值：true） -是启用？它将启用或禁用已配置的工具提示触发器。

                tooltip-is-open  （默认值：false） -是否显示工具提示。

                tooltip-placement Ç  （默认值：top，配置：placement） -传递在放置之前由空格分隔将使自动定位“自动”，例如：“自动左下”。工具提示将尝试定位它最适合最近的可滚动祖先的位置。接受：

                top - 工具提示位于顶部，水平居中于主机元素。
                top-left - 顶部的工具提示，左边缘与主机元素左边缘对齐。
                top-right - 工具提示在顶部，右边缘与主机元素右边缘对齐。
                bottom - 工具提示在底部，水平居中于主机元素。
                bottom-left - 底部的工具提示，左边缘与主机元素左边缘对齐。
                bottom-right - 工具提示在底部，右边缘与主机元素右边缘对齐。
                left - 左侧工具提示，垂直居中于主机元素。
                left-top - 左侧工具提示，顶部边缘与主机元素顶部边缘对齐。
                left-bottom - 左侧工具提示，底部边缘与主机元素底部边缘对齐。
                right - 右侧工具提示，垂直居中于主机元素。
                right-top - 右侧工具提示，顶部边缘与主机元素顶部边缘对齐。
                right-bottom - 右侧工具提示，底部边缘与主机元素底部边缘对齐。
                tooltip-popup-close-delay Ç  （默认：0，配置：popupCloseDelay） -应给予多长时间的提示收盘触发事件后继续开放？

                tooltip-popup-delay Ç  （默认：0，配置：popupDelay） -以毫秒为单位弹出延迟，直至打开。

                tooltip-trigger $  （默认值：'mouseenter'） -我应该触发提示的节目？支持以空格分隔的事件名称或对象列表（参见下文）。

                注意：要配置工具提示，您需要执行此操作$uibTooltipProvider（另请参见下文）。

                触发器
                开箱即用支持以下show触发器及其提供的隐藏触发器：

                mouseenter： mouseleave
                click： click
                outsideClick： outsideClick
                focus： blur
                none
                该outsideClick触发器将导致提示切换上点击，并点击任何东西时隐藏。

                对于任何不受支持的值，触发器将用于显示和隐藏工具提示。使用'none'触发器将禁用内部触发器，然后可以tooltip-is-open专门使用该属性来显示和隐藏工具提示。

                $ uibTooltipProvider
                通过$uibTooltipProvider，您可以更改默认情况下工具提示和弹出窗口的行为方式; 上述属性始终优先。可以使用以下方法：

                setTriggers(obj) （例如：{ 'openTrigger': 'closeTrigger' }） -扩展用自己的的映射提及的默认触发映射。

                options(obj) - 为某些工具提示和弹出属性提供一组默认值。目前支持具有C徽章的那些。
            </pre>
        </div>
    </div>
</div>

